<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./JS/jQuery.min.js"></script>
  <!-- <link rel="stylesheet" href="./bootstrap-4.6.2/dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
</head>

<body>
  <!-- 图标 -->
  <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
  <i class="bi-alarm"></i>
  <i class="bi bi-wallet-fill" style="width: 20px; height: 20px;"></i>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-heart-eyes"
    viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
    <path
      d="M11.315 10.014a.5.5 0 0 1 .548.736A4.498 4.498 0 0 1 7.965 13a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .548-.736h.005l.017.005.067.015.252.055c.215.046.515.108.857.169.693.124 1.522.242 2.152.242.63 0 1.46-.118 2.152-.242a26.58 26.58 0 0 0 1.109-.224l.067-.015.017-.004.005-.002zM4.756 4.566c.763-1.424 4.02-.12.952 3.434-4.496-1.596-2.35-4.298-.952-3.434zm6.488 0c1.398-.864 3.544 1.838-.952 3.434-3.067-3.554.19-4.858.952-3.434z" />
  </svg>

  <!-- 通过属性显示 -->
  <button type="button" data-bs-toggle="modal" data-bs-target=".mymodal">显示弹框</button>
  <!-- data-bs-dismiss="modal" 通过属性来控制 -->
  <button type="button" data-bs-dismiss="modal">隐藏弹框</button>
  <button type="button" class="diao">调用模态框</button>

  <!-- 模态框 -->
  <div class="modal mymodal" tabindex="-1">
    <div class="modal-dialog">
      <!-- 弹框内容 -->
      <div class="modal-content">
        <!-- 弹框头部 -->
        <div class="modal-header">
          <h5 class="modal-title">登入</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 弹框身体 -->
        <div class="modal-body">
          姓名 <input type="text" name="username" class="username"><br>
          密码 <input type="password" name="password" class="password">
        </div>
        <!-- 弹框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
  <!-- <script src="./bootstrap-4.6.2/dist/js/bootstrap.min.js"></script> -->

  <script>
    const modalDom = document.querySelector('.mymodal')
    // 得到模态框
    const modal = new bootstrap.Modal(modalDom)

    // 调用模态框
    const diao = document.querySelector('.diao')
    diao.addEventListener('click', () => {
      // 显示弹框
      modal.show()
    })

    // 点击保存 隐藏模态框
    document.querySelector('.save-btn').addEventListener('click', () => {
      // 获取用户内容
      const username = document.querySelector('.username').value
      console.log(username);
      
      // 隐藏弹框
      modal.hide()
    })
  </script>

</body>

</html>